<template>
  <div class="operation">
    <div class="operation-search">
      <a-form layout="inline">
        <a-form-item label="查找">
          <a-input v-model="searchItem.KeyWords" />
        </a-form-item>
        <a-form-item>
          <a-button class="default-button" @click="getConfigFun">
            查询
          </a-button>
        </a-form-item>
        <a-form-item>
          <general-button
            @operation="addProcedure"
            btnText="新增"
            btnPowerNum="6F013048-1EFC-42D4-9123-201986E06AB1"
          ></general-button>
        </a-form-item>
        <!-- <a-form-item>
            <a-button class="default-button"> 导入 </a-button>
          </a-form-item>
          <a-form-item>
            <a-button class="default-button"> 导出 </a-button>
          </a-form-item>
          <a-form-item>
            <a-button class="default-button"> 下载模板 </a-button>
          </a-form-item>
          <a-form-item>
            <a-button class="default-button"> 打印 </a-button>
          </a-form-item> -->
      </a-form>
    </div>
    <div class="table-box">
      <div class="operation-table" id="OperationManageID">
        <div class="operation-table-box">
          <a-table
            className="components-table-demo-nested"
            :columns="columns"
            :row-key="(record) => record.id"
            :data-source="procedureData"
            :loading="loading"
            :scroll="{ y: procedurescrollY }"
            @change="handleTableChange"
            :pagination="false"
            size="middle"
          >
            <template slot="name" slot-scope="name">
              {{ name }}
            </template>
            <template slot="action" slot-scope="text, record">
              <div class="chart-manage">
                <a-icon
                  type="edit"
                  class="icon-class"
                  @click="procedureeditFun(record)"
                />
                <a-icon
                  type="delete"
                  class="icon-class"
                  @click="proceduredelFun(record)"
                />
              </div>
            </template>
          </a-table>
        </div>
      </div>
    </div>

    <initial-form
      :show.sync="procedureShow"
      :isEdit="procedureisEdit"
      :reviseForm="procedureInfo"
      @break="getConfigFun()"
    ></initial-form>
  </div>
</template>
  
  <script>
import { getTableScroll } from "@/common/table-calc";
// import ProcedureForm from "./children/procedure-form.vue";
import initialForm from "./children/initial-form.vue";
import { getConfig, delConfig } from "@/api/ConfigApi";
import GeneralButton from "@/components/be-current-btn.vue";
//配置信息列表
const columns = [
  {
    title: "序号",
    dataIndex: "num",
    width: "10%",
    align: "center",
  },
  {
    title: "名称",
    dataIndex: "ConfigKey",
    sorter: true,
    width: "15%",
    scopedSlots: { customRender: "name" },
    align: "center",
  },
  {
    title: "配置值",
    dataIndex: "ConfigValue",
    sorter: true,
    width: "30%",
    ellipsis: true,
    align: "center",
  },
  {
    title: "描述",
    dataIndex: "Remark",
    width: "35%",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "operate",
    width: "10%",
    align: "center",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  name: "ConfigInformation",
  components: {
    // ProcedureForm,
    initialForm,
    GeneralButton,
  },
  data() {
    return {
      procedureInfo: {}, //新增删除配置信息信息
      searchItem: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
        KeyWords: "",
      }, //搜索
      procedureTotal: 0,
      loading: true, //表格loading
      columns, //配置信息列表表头
      procedurescrollY: 0, //动态计算表格高度

      procedureShow: false, //添加配置信息
      procedureisEdit: false, //判断是添加还是修改
      procedureData: [
        {
          id: 1,
          num: 1,
          name: "静置",
          desc: "预处理",
          time: "2023-04-06",
          user: "iKun",
        },
        {
          id: 2,
          num: 2,
          name: "称量",
          desc: "称量",
          time: "2023-04-06",
          user: "iKun",
        },
      ], //配置信息列表
    };
  },
  methods: {
    //获取配置信息列表
    async getConfigFun() {
      const res = await getConfig(this.searchItem.KeyWords);
      this.procedureData = res.Data;
      this.procedureTotal = res.Data.TotalNumber;
      this.loading = false;
      this.procedureData.map((item, index) => {
        item.num = index + 1;
      });
    },
    //查询
    searchstdoperationList() {
      this.searchItem.pageRequestModel.pageIndex = 1;
      this.getConfigFun();
    },
    //点击表格行触发
    handleTableChange() {},
    //添加配置信息
    addProcedure() {
      this.procedureInfo = {};
      this.procedureisEdit = false;
      this.procedureShow = true;
    },
    //修改配置信息
    procedureeditFun(item) {
      if (!this.hasPermission("9352BFEE-B697-422C-9631-7182B2266F56")) return;
      this.procedureInfo = JSON.parse(JSON.stringify(item));
      this.procedureShow = true;
      this.procedureisEdit = true;
    },
    //切换页数
    procedureChange(page, pageSize) {
      this.searchItem.pageRequestModel.pageIndex = page;
      this.searchItem.pageRequestModel.pageSize = pageSize;
      this.getConfigFun();
    },
    //切换条数
    onShowSizeChange(current, size) {
      this.searchItem.pageRequestModel.pageIndex = current;
      this.searchItem.pageRequestModel.pageSize = size;
      this.getConfigFun();
    },
    //删除配置信息
    proceduredelFun(item) {
      if (!this.hasPermission("7358A51C-6C60-4395-843D-818B791E37AA")) return;
      delete item.num;
      const that = this;
      this.$confirm({
        title: `确认要删除【${item.ConfigKey}】？`,
        content: "",
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        async onOk() {
          const res = await delConfig(item);
          if (res.Data == "") {
            that.$message.info("删除成功");
            that.getConfigFun();
          } else {
            that.$message.info(res.Data);
          }
        },
        onCancel() {},
      });
    },
  },
  created() {
    this.getConfigFun();
  },
  updated() {
    this.$nextTick(() => {
      this.procedurescrollY = getTableScroll(58, "OperationManageID");
    });
  },
};
</script>
  
  <style lang="less" scoped>
.operation {
  background-color: #ffffff;
  padding: 0.5rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .operation-search {
    display: flex;
    justify-content: flex-end;
    border-bottom: 2px solid #f0f2f5;
    margin-bottom: 0.9375rem;
  }
  .table-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;

    .operation-table {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      .operation-table-box {
        height: 100%;
        flex: 2;
      }
    }
    .workunit-table {
      flex: 1;
      border: 1px solid #dddddd;
      border-radius: 0.625rem;
      padding: 0.9375rem;
      .workunit-title {
        margin-bottom: 0.625rem;
      }
    }
  }
}
</style>
  